import 'dart:io';

import 'package:bruno/bruno.dart';
import 'package:city_pickers/city_pickers.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:getwidget/getwidget.dart';
import 'package:images_picker/images_picker.dart';
import 'package:meal/constant/sizes.dart';
import 'package:meal/route/route.dart';
import 'package:meal/utils/colors.dart';
import 'package:meal/utils/styles.dart';
import 'package:meal/utils/tools.dart';

class CategorySecond extends StatefulWidget {
  const CategorySecond({Key? key}) : super(key: key);

  @override
  State<CategorySecond> createState() => _CategorySecondState();
}

class _CategorySecondState extends State<CategorySecond> {
  List<Media> shops = [];

  List<Media> inners = [];

  Widget get titleAction {
    return Text.rich(TextSpan(children: [
      TextSpan(text: '2/', style: StylesUtils.customTextStyle(fontSize: Sizes.default18)),
      TextSpan(text: '4', style: StylesUtils.customTextStyle(color: ColorsUtils.colorFeb)),
      TextSpan(text: '选择品类', style: StylesUtils.customTextStyle(fontSize: Sizes.default18))
    ]));
  }

  double get leftWidth {
    return Sizes.default80;
  }

  double get rowHeight {
    return Sizes.default66;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: ToolsUtils.getDefaultBackgroundColor(),
      appBar: ToolsUtils.customBrnAppBar(titleAction),
      body: SingleChildScrollView(
        child: Column(
          children: [
            Container(
              padding: const EdgeInsets.symmetric(
                  horizontal: Sizes.default15, vertical: Sizes.default10),
              decoration: const BoxDecoration(color: Colors.white),
              child: Text('为了方便我们与您尽快联系达成合作，请如实填写以下资料，谢谢您的支持与配合！',
                  style: StylesUtils.customTextStyle(color: ColorsUtils.color797)),
            ),
            Container(
              height: rowHeight,
              margin: const EdgeInsets.only(top: Sizes.default15),
              padding: const EdgeInsets.symmetric(horizontal: Sizes.default15),
              decoration: const BoxDecoration(color: Colors.white),
              child: Row(
                children: [
                  Container(
                    width: leftWidth,
                    alignment: Alignment.centerLeft,
                    child: Text('负责人',
                        style: StylesUtils.customTextStyle(
                            fontSize: Sizes.default15, color: ColorsUtils.color333)),
                  ),
                  Expanded(
                      child: Container(
                        padding: const EdgeInsets.symmetric(horizontal: Sizes.default10),
                    decoration: BoxDecoration(
                        color: ColorsUtils.rgba(247, 247, 247, 1),
                        borderRadius: const BorderRadius.all(Radius.circular(Sizes.default10))),
                    child: TextField(
                      style: StylesUtils.customTextStyle(
                          color: ColorsUtils.color363, fontSize: Sizes.default16),
                      decoration: InputDecoration(
                          border: const OutlineInputBorder(
                            borderSide: BorderSide.none,
                          ),
                          isCollapsed: true,
                          filled: true,
                          fillColor: Colors.transparent,
                          contentPadding: const EdgeInsets.symmetric(
                              horizontal: Sizes.default10, vertical: Sizes.default10),
                          constraints: const BoxConstraints(minHeight: Sizes.default40),
                          hintText: '请输入负责人真实姓名',
                          hintStyle: StylesUtils.customTextStyle(
                              fontSize: Sizes.default15, color: ColorsUtils.color999)),
                      keyboardType: TextInputType.text,
                      onChanged: (String content) {},
                    ),
                  ))
                ],
              ),
            ),
            Container(
              height: rowHeight,
              padding:
                  const EdgeInsets.symmetric(horizontal: Sizes.default15, vertical: Sizes.default8),
              decoration: const BoxDecoration(color: Colors.white),
              child: Row(
                children: [
                  Container(
                    width: leftWidth,
                    alignment: Alignment.centerLeft,
                    child: Text('手机号码',
                        style: StylesUtils.customTextStyle(
                            fontSize: Sizes.default15, color: ColorsUtils.color333)),
                  ),
                  Expanded(
                      child: Container(
                    padding: const EdgeInsets.symmetric(horizontal: Sizes.default10),
                    alignment: Alignment.centerLeft,
                    decoration: BoxDecoration(
                        color: ColorsUtils.rgba(247, 247, 247, 1),
                        borderRadius: const BorderRadius.all(Radius.circular(Sizes.default10))),
                    child: Row(
                      children: [
                        Text.rich(TextSpan(
                            text: '+86',
                            style: StylesUtils.customTextStyle(
                                fontSize: Sizes.default16, color: ColorsUtils.color363))),
                        Expanded(
                            child: TextField(
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.color363, fontSize: Sizes.default16),
                          decoration: InputDecoration(
                              border: const OutlineInputBorder(
                                borderSide: BorderSide.none,
                              ),
                              isCollapsed: true,
                              filled: true,
                              fillColor: Colors.transparent,
                              contentPadding: const EdgeInsets.symmetric(
                                  horizontal: Sizes.default10, vertical: Sizes.default10),
                              constraints: const BoxConstraints(minHeight: Sizes.default40),
                              hintText: '请输入联系手机号码',
                              hintStyle: StylesUtils.customTextStyle(
                                  fontSize: Sizes.default15, color: ColorsUtils.color999)),
                          keyboardType: TextInputType.phone,
                          onChanged: (String content) {},
                        ))
                      ],
                    ),
                  ))
                ],
              ),
            ),
            Container(
              height: rowHeight,
              margin: const EdgeInsets.only(top: Sizes.default15),
              padding:
                  const EdgeInsets.symmetric(horizontal: Sizes.default15, vertical: Sizes.default8),
              decoration: const BoxDecoration(color: Colors.white),
              child: Row(
                children: [
                  Container(
                    width: leftWidth,
                    alignment: Alignment.centerLeft,
                    child: Text('主营品类',
                        style: StylesUtils.customTextStyle(
                            fontSize: Sizes.default15, color: ColorsUtils.color333)),
                  ),
                  Expanded(
                    child: GestureDetector(
                      child: Container(
                        padding: const EdgeInsets.symmetric(horizontal: Sizes.default10),
                        alignment: Alignment.centerLeft,
                        decoration: BoxDecoration(
                            color: ColorsUtils.rgba(247, 247, 247, 1),
                            borderRadius: const BorderRadius.all(Radius.circular(Sizes.default10))),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Text('肠粉',
                                style: StylesUtils.customTextStyle(
                                    fontSize: Sizes.default15, color: ColorsUtils.color333)),
                            BrunoTools.getAssetSizeImage(BrnAsset.iconRightArrow, 16, 16)
                          ],
                        ),
                      ),
                      onTap: () {
                        Get.toNamed(RouteGet.categoryBreed);
                      },
                    ),
                  ),
                ],
              ),
            ),
            Container(
              height: rowHeight,
              padding:
                  const EdgeInsets.symmetric(horizontal: Sizes.default15, vertical: Sizes.default8),
              decoration: const BoxDecoration(color: Colors.white),
              child: Row(
                children: [
                  Container(
                    width: leftWidth,
                    alignment: Alignment.centerLeft,
                    child: Text('辅营品类',
                        style: StylesUtils.customTextStyle(
                            fontSize: Sizes.default15, color: ColorsUtils.color333)),
                  ),
                  Expanded(
                    child: GestureDetector(
                      child: Container(
                        padding: const EdgeInsets.symmetric(horizontal: Sizes.default10),
                        alignment: Alignment.centerLeft,
                        decoration: BoxDecoration(
                            color: ColorsUtils.rgba(247, 247, 247, 1),
                            borderRadius: const BorderRadius.all(Radius.circular(Sizes.default10))),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Text('请选择',
                                style: StylesUtils.customTextStyle(
                                    fontSize: Sizes.default15, color: ColorsUtils.color999)),
                            BrunoTools.getAssetSizeImage(BrnAsset.iconRightArrow, 16, 16)
                          ],
                        ),
                      ),
                      onTap: () {
                        Get.toNamed(RouteGet.categoryBreed);
                      },
                    ),
                  ),
                ],
              ),
            ),
            Container(
              height: rowHeight,
              margin: const EdgeInsets.only(top: Sizes.default15),
              padding:
                  const EdgeInsets.symmetric(horizontal: Sizes.default15, vertical: Sizes.default8),
              decoration: const BoxDecoration(color: Colors.white),
              child: Row(
                children: [
                  Container(
                    width: leftWidth,
                    alignment: Alignment.centerLeft,
                    child: Text('店铺名称',
                        style: StylesUtils.customTextStyle(
                            fontSize: Sizes.default15, color: ColorsUtils.color333)),
                  ),
                  Expanded(
                      child: Container(
                        padding: const EdgeInsets.symmetric(horizontal: Sizes.default10),
                        alignment: Alignment.centerLeft,
                        decoration: BoxDecoration(
                            color: ColorsUtils.rgba(247, 247, 247, 1),
                            borderRadius: const BorderRadius.all(Radius.circular(Sizes.default10))),
                    child: TextField(
                      style: StylesUtils.customTextStyle(
                          color: ColorsUtils.color363, fontSize: Sizes.default16),
                      decoration: InputDecoration(
                          border: const OutlineInputBorder(
                            borderSide: BorderSide.none,
                          ),
                          isCollapsed: true,
                          filled: true,
                          fillColor: ColorsUtils.rgba(247, 247, 247, 1),
                          contentPadding: const EdgeInsets.symmetric(
                              horizontal: Sizes.default10, vertical: Sizes.default10),
                          constraints: const BoxConstraints(minHeight: Sizes.default40),
                          hintText: '请输入店铺名称',
                          hintStyle: StylesUtils.customTextStyle(
                              fontSize: Sizes.default15, color: ColorsUtils.color999)),
                      keyboardType: TextInputType.text,
                      onChanged: (String content) {},
                    ),
                  ))
                ],
              ),
            ),
            Container(
              height: rowHeight,
              padding:
                  const EdgeInsets.symmetric(horizontal: Sizes.default15, vertical: Sizes.default8),
              decoration: const BoxDecoration(color: Colors.white),
              child: Row(
                children: [
                  Container(
                    width: leftWidth,
                    alignment: Alignment.centerLeft,
                    child: Text('所在地址',
                        style: StylesUtils.customTextStyle(
                            fontSize: Sizes.default15, color: ColorsUtils.color333)),
                  ),
                  Expanded(
                    child: GestureDetector(
                      onTap: selectAddress,
                      child: Container(
                        padding: const EdgeInsets.symmetric(horizontal: Sizes.default10),
                        alignment: Alignment.centerLeft,
                        decoration: BoxDecoration(
                            color: ColorsUtils.rgba(247, 247, 247, 1),
                            borderRadius: const BorderRadius.all(Radius.circular(Sizes.default10))),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Text('请选择',
                                style: StylesUtils.customTextStyle(
                                    fontSize: Sizes.default15, color: ColorsUtils.color999)),
                            BrunoTools.getAssetSizeImage(BrnAsset.iconRightArrow, 16, 16)
                          ],
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
            Container(
              height: rowHeight,
              padding:
                  const EdgeInsets.symmetric(horizontal: Sizes.default15, vertical: Sizes.default8),
              decoration: const BoxDecoration(color: Colors.white),
              child: Row(
                children: [
                  Container(
                    width: leftWidth,
                    alignment: Alignment.centerLeft,
                    child: Text('详细地址',
                        style: StylesUtils.customTextStyle(
                            fontSize: Sizes.default15, color: ColorsUtils.color333)),
                  ),
                  Expanded(
                      child: Container(
                        padding: const EdgeInsets.symmetric(horizontal: Sizes.default10),
                        alignment: Alignment.centerLeft,
                        decoration: BoxDecoration(
                            color: ColorsUtils.rgba(247, 247, 247, 1),
                            borderRadius: const BorderRadius.all(Radius.circular(Sizes.default10))),
                    child: TextField(
                      style: StylesUtils.customTextStyle(
                          color: ColorsUtils.color363, fontSize: Sizes.default16),
                      decoration: InputDecoration(
                          border: const OutlineInputBorder(
                            borderSide: BorderSide.none,
                          ),
                          isCollapsed: true,
                          filled: true,
                          fillColor: Colors.transparent,
                          contentPadding: const EdgeInsets.symmetric(
                              horizontal: Sizes.default10, vertical: Sizes.default10),
                          constraints: const BoxConstraints(minHeight: Sizes.default40),
                          hintText: '请输入门店详细地址',
                          hintStyle: StylesUtils.customTextStyle(
                              fontSize: Sizes.default15, color: ColorsUtils.color999)),
                      keyboardType: TextInputType.text,
                      onChanged: (String content) {},
                    ),
                  ))
                ],
              ),
            ),
            Container(
              margin: const EdgeInsets.symmetric(horizontal: Sizes.default15),
              padding: const EdgeInsets.symmetric(vertical: Sizes.default15),
              decoration: const BoxDecoration(color: Colors.white),
              alignment: Alignment.center,
              child: Container(
                width: 345,
                constraints: const BoxConstraints(minHeight: 205),
                alignment: Alignment.center,
                decoration: BoxDecoration(color: ColorsUtils.rgba(247, 247, 247, 1)),
                child: Column(
                  children: [
                    Container(
                      padding: const EdgeInsets.only(top: Sizes.default50),
                      alignment: Alignment.center,
                      child: Wrap(
                        spacing: Sizes.default10,
                        runSpacing: Sizes.default10,
                        crossAxisAlignment: WrapCrossAlignment.center,
                        children: [
                          ...shops.map((e) => GFImageOverlay(
                              image: FileImage(File(e.path)), width: 100, height: 100)),
                          GestureDetector(
                            onTap: () {
                              uploadImg(1);
                            },
                            child: SizedBox(
                                height: 46,
                                width: 46,
                                child: ToolsUtils.getUrlSvg(
                                    'https://cdn7.axureshop.com/demo/1525603/images/2门店信息/u579.svg')),
                          )
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ),
            Container(
              height: Sizes.default50,
              decoration: const BoxDecoration(color: Colors.white),
              alignment: Alignment.center,
              child: Text('店铺门面图(需包含完整牌匾)',
                  style: StylesUtils.customTextStyle(
                      fontSize: Sizes.default15, color: ColorsUtils.color333)),
            ),
            Container(
              margin: const EdgeInsets.symmetric(horizontal: Sizes.default15),
              padding: const EdgeInsets.symmetric(vertical: Sizes.default15),
              decoration: const BoxDecoration(color: Colors.white),
              alignment: Alignment.center,
              child: Container(
                width: 345,
                constraints: const BoxConstraints(minHeight: 205),
                alignment: Alignment.center,
                decoration: BoxDecoration(color: ColorsUtils.rgba(247, 247, 247, 1)),
                child: Column(
                  children: [
                    Container(
                      padding: const EdgeInsets.only(top: Sizes.default50),
                      alignment: Alignment.center,
                      child: Wrap(
                        spacing: Sizes.default10,
                        runSpacing: Sizes.default10,
                        crossAxisAlignment: WrapCrossAlignment.center,
                        children: [
                          ...inners.map((e) => GFImageOverlay(
                              image: FileImage(File(e.path)), width: 100, height: 100)),
                          GestureDetector(
                            onTap: () {
                              uploadImg(2);
                            },
                            child: SizedBox(
                                height: 46,
                                width: 46,
                                child: ToolsUtils.getUrlSvg(
                                    'https://cdn7.axureshop.com/demo/1525603/images/2门店信息/u579.svg')),
                          )
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ),
            Container(
              height: Sizes.default50,
              decoration: const BoxDecoration(color: Colors.white),
              alignment: Alignment.center,
              child: Text('店内真实环境图',
                  style: StylesUtils.customTextStyle(
                      fontSize: Sizes.default15, color: ColorsUtils.color333)),
            ),
          ],
        ),
      ),
      bottomNavigationBar: SafeArea(
        top: false,
        child: Container(
            height: Sizes.default60,
            alignment: Alignment.topCenter,
            padding: const EdgeInsets.symmetric(vertical: Sizes.default10),
            decoration: const BoxDecoration(color: Colors.white),
            child: SizedBox(
              height: Sizes.default40,
              child: FractionallySizedBox(
                widthFactor: 0.9,
                child: GFButton(
                    onPressed: () {
                      Get.toNamed(RouteGet.categoryThird);
                    },
                    text: '下一步',
                    textStyle: StylesUtils.customTextStyle(fontSize: Sizes.default16),
                    shape: GFButtonShape.pills,
                    type: GFButtonType.solid,
                    size: GFSize.LARGE,
                    color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorFf6)),
              ),
            )),
      ),
    );
  }

  Future<void> selectAddress() async {
    Result? result = await CityPickers.showCityPicker(
      context: context,
    );
    debugPrint('result = ${result.toString()}');
  }

  void uploadImg(int type) {
    ToolsUtils.openGalleryOrCamera(context, (res) {
      uploadFilePath(res, type);
    }, (resp) {
      uploadFilePath(resp, type);
    });
  }

  void uploadFilePath(List<Media> res, int type) {
    if (type == 1) {
      shops.addAll(res);
    } else {
      inners.addAll(res);
    }
    setState(() {});
  }
}
